<template>
	<div>
		<order-send-express-dialog
			ref="sendOrderExpressDialog"
			@sendOrder="sendOrder"
			:orderRow="orderRow"
		/>
		<el-dialog
			:title="orderRow.order_no + ' 订单备注'"
			v-model="remarkOrderDialogVisible"
			:append-to-body="true"
			:close-on-click-modal="false"
			width="400px"
		>
			<el-input type="textarea" :rows="5" v-model="seller_remark" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="closeRemarkOrderDialog">取 消</el-button>
					<el-button type="primary" :loading="isBtnLoad" @click="changeRemark"
						>修 改</el-button
					>
				</div>
			</template>
		</el-dialog>
		<div v-if="btnType === 'link-vertical'">
			<div class="option-item">
				<el-button size="mini" class="btn-link" type="text" @click="openRemarkOrderDialog"
					>卖家备注</el-button
				>
			</div>
			<div class="option-item" v-if="isShowBtn('close_order')">
				<el-button size="mini" class="btn-link" type="text" @click="closeOrder"
					>关闭订单</el-button
				>
			</div>
			<div class="option-item" v-if="isShowBtn('confirm_goods')">
				<el-button size="mini" class="btn-link" type="text" @click="confirmGoods"
					>备货</el-button
				>
			</div>
			<div class="option-item" v-if="isShowBtn('send_order')">
				<el-button size="mini" class="btn-link" type="text" @click="openSendOrderDialog"
					>发货</el-button
				>
			</div>
			<div class="option-item" v-if="isShowBtn('send_order') && orderRow.is_cancel_goods == 1">
				<el-button size="mini" class="btn-link" type="text" @click="cancelGoods"
					>取消备货</el-button
				>
			</div>
			<div class="option-item" v-if="isShowBtn('confirm_order')">
				<div>
					<el-button size="mini" class="btn-link" type="text" @click="confirmOrder"
						>确认收货</el-button
					>
				</div>
			</div>
			<div class="option-item" v-if="isShowBtn('confirm_order')">
				<div>
					<el-button size="mini" class="btn-link" type="text" @click="openSendOrderDialog"
						>取消发货</el-button
					>
				</div>
			</div>
		</div>
		<div v-if="btnType === 'btn-horizontal'">
			<el-button size="mini" class="btn-link" type="text" @click="openRemarkOrderDialog"
				>卖家备注</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('close_order')" type="text" @click="closeOrder"
				>关闭订单</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('confirm_goods')" type="text" @click="confirmGoods"
				>备货</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('send_order')" type="text" @click="openSendOrderDialog"
				>发货</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('send_order') && orderRow.is_cancel_goods == 1" type="text" @click="cancelGoods"
				>取消备货</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('confirm_order')" type="text" @click="confirmOrder"
				>确认收货</el-button
			>
			<el-button size="mini" class="btn-link" v-show="isShowBtn('confirm_order')" type="text" @click="openSendOrderDialog"
				>取消发货</el-button
			>
		</div>
	</div>
</template>

<script>
import OrderSendExpressDialog from "./sendExpressDialog.vue";
import "./common.scss";
export default {
	name: "order-op-btn",
	components: {
		OrderSendExpressDialog
	},
	props: {
		orderRow: {
			type: Object,
			default: () => {
				return { order_no: "",seller_remark: "" };
			}
		},
		btnType: { type: String, default: "link-vertical" }
	},
	emits: ["orderChange"],
	data() {
		return {
			statusTexts: {
				close_order: "关闭订单",
				confirm_goods: "确认备货",
				cancel_goods: "取消备货",
				confirm_order: "确认收货"
			},
			remarkOrderDialogVisible: false,
			isBtnLoad: false,
			seller_remark: ""
		};
	},
	watch:{
		orderRow: {
			handler(val) {
				this.seller_remark = val.seller_remark;
			},
			deep: true
		}
	},
	methods: {
		isShowBtn(_type) {
			return this.$TOOL.isOrderShowBtn(_type, this.orderRow);
		},
		sendChangeOrder(_type, _nextStatus) {
			let formData = {};
			let _this = this;
			formData["type"] = _type;
			formData["order_id"] = _this.orderRow.id;
			_this.$API.shop.order.changeStatus(formData)
				.then((res) => {
					if (res.code === 0) {
						_this.$message.success(_this.statusTexts[_type] + "成功");
						_this.orderRow.status = _nextStatus;
					}
					else{
						_this.$message.error(_this.statusTexts[_type] + "失败，" + res.message);
					}
				})
				.catch((err) => {
					this.$message.error(err);
				});
		},
		closeOrder() {
			this.showConfirm("close_order", "关闭", 0);
		},
		cancelGoods() {
			this.showConfirm("cancel_goods", "取消备货", 2);
		},
		/**
		 * 确认备货
		 */
		confirmGoods() {
			this.showConfirm("confirm_goods", "备货", 3);
		},
		// 打开发货窗口
		openSendOrderDialog() {
			this.$refs["sendOrderExpressDialog"].openSendOrderDialog();
		},
		// 打开备注修改
		openRemarkOrderDialog() {
			this.remarkOrderDialogVisible = true;
		},
		closeRemarkOrderDialog() {
			this.remarkOrderDialogVisible = false;
		},
		sendOrder(_data) {
			console.log(_data);
			this.closeRemarkOrderDialog();
			this.$emit("orderChange", {
				// form: this.form,
				// order: this.order
			});
		},
		showConfirm(_type, _text, _nextStatus) {
			this.$confirm(
				'确认 <span style="color:#F00">' +
					_text +
					"</span> " +
					this.orderRow.order_no +
					" 订单吗？",
				"提示",
				{
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					dangerouslyUseHTMLString: true,
					type: "warning"
				}
			)
				.then(() => {
					this.sendChangeOrder(_type, _nextStatus);
				})
				.catch((err) => {
					console.log(err);
				});
		},
		/**
		 * 确认收货
		 */
		confirmOrder() {
			this.showConfirm("confirm_order", "收货", 99);
		},
		sellerRemarkInput(val) {
			console.log(val);
			// this.orderRow.seller_remark = val;
		},
		changeRemark() {
			let formData = {};
			let _this = this;
			formData["type"] = "seller_remark";
			formData["order_id"] = _this.orderRow.id;
			formData["remark"] = _this.seller_remark;
			// console.log(formData);return;
			_this.isBtnLoad = true;
			_this.$API.shop.order.changeRemark(formData).then((res) => {
				if (res.code === 0) {
					_this.isBtnLoad = false;
					_this.$message.success("编辑成功");
					_this.closeRemarkOrderDialog();
				}
				else {
					this.$message.error('handleGoodsSet 失败,' + res.message);
				}
			});
			setTimeout(function () {
				_this.isBtnLoad = false;
			}, 5000);
		}
	}
};
</script>

<style scoped></style>
